<template>
    <div class="Alert_Top">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            实时警报
        </p>
    </div>
    <div class="Alert_Bottom">
        <table style="width: 350px; height: 200px">
            <thead>
                <tr class="tr">
                    <th>序号</th>
                    <th>设置名称</th>
                    <th>设置状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in settings" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.enabled }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
const settings = reactive([
    { id: 1, name: '二号楼', enabled: '摄像头灭火报警' },
    { id: 2, name: '三号楼', enabled: '摄像头灭火报警' },
    { id: 3, name: '四号楼', enabled: '摄像头灭火报警' },
    { id: 4, name: '五号楼', enabled: '摄像头灭火报警' },
    { id: 5, name: '六号楼', enabled: '摄像头灭火报警' }
]);
</script>

<style lang="scss" scoped>
.Alert_Top {
    position: fixed;
    right: 80px;
    top: 470px;
    width: 350px;
    height: 30px;
    background-image: url('../../assets/CombinedShape.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.Alert_Bottom {
    position: fixed;
    right: 80px;
    top: 520px;
    width: 350px;
    height: 200px;
    background: rgba(12, 29, 95, 1);
    font-size: 12px;
}
table {
    width: 100%;
    border-collapse: collapse;
}

.tr {
    color: #A2B6FF;
    height: 40px;
    background: linear-gradient(229.52deg, rgba(14, 95, 255, 1) 0%, rgba(14, 95, 255, 0.43) 100%);
}

th,
td {
    /* padding: 5px; */
    text-align: center;
}
</style>